import * as React from 'react';
import './index.scss';
import { Layout ,Menu, Icon, Button } from 'antd';
import {Route,Switch,withRouter,Redirect} from 'react-router-dom';
import AsyncLoader from '$AsyncLoader'; 

const { Header, Sider, Content } = Layout;
// const SubMenu = Menu.SubMenu;

class ReactBox extends React.Component{
  constructor(props) {
    super(props);
    let arr = [],
        rootSubmenuKeys=['router', 'loop', 'around'],
        openKeys = [],
        async =false;
        arr[0] = props.location.pathname;

        //判断是否是直接输入，默认不调取本地存储
        rootSubmenuKeys.map((m)=>{
          if(props.location.pathname.indexOf(m) !==-1){
            async =true;
          }
          return async
        });

        if(async){
          openKeys =  sessionStorage.getItem('react-menu-arr-openkeys') ? JSON.parse(sessionStorage.getItem('react-menu-arr-openkeys')):[];
        } else{
          openKeys = [];
        }

    this.state = {
      collapsed: false,
      key :arr,
      rootSubmenuKeys,
      openKeys
    };
  }

  //显示隐藏 菜单栏
  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
  // 点击菜单，改变url，更改页面
  navClickFn = (res)=>{
    if(res.keyPath.length>1){
      sessionStorage.setItem('react-menu-arr-openkeys',JSON.stringify(this.state.openKeys)); 
    } else{
      sessionStorage.removeItem('react-menu-arr-openkeys');
    }

    this.props.history.push(res.key);
  }

  

  //默认打开submenu  key 数组
  onOpenChange = (openKeys) =>{
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);

    if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : [],
      });
    }
    
  }
 
  render() {
    return (
      <div className="react-wrap" >
       <Layout className="antd-wrap">
          <Header className="header-wrap g-text-ove1">
            <img src={require('$img/back/logo.png')} alt="" onClick={()=>{
              this.props.history.push('/');
            }}/>
            <span onClick={()=>{
              window.location.href = 'http://10.15.198.18:8090/pages/viewpage.action?pageId=3933495'
            }} >react-native-cli 脚手架学习及运用</span>
            <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
              <Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
            </Button>
          </Header>
          <Layout>
            <Sider 
              trigger={null}
              collapsible
              collapsed={this.state.collapsed}
            >
              <Menu
                defaultSelectedKeys={this.state.key}
                openKeys={this.state.openKeys}
                mode="inline"
                theme="dark"
                onClick = {(res)=>{
                  this.navClickFn(res)
                }}
                onOpenChange={(res)=>{
                  this.onOpenChange(res)
                }}
              >
              {/* 简单介绍 */}
                <Menu.Item key="/rn/know">
                  <Icon type="file" />
                  <span>简单了解</span>
                </Menu.Item>
              {/* jsx */}
                <Menu.Item key="/rn/state">
                  <Icon type="file" />
                  <span>state 概念</span>
                </Menu.Item>
                
              </Menu>
            </Sider>
            <Content className="react-content-wrap">
              <Switch>
                {/* 首页 */}
                <Route
                  exact
                  path="/rn"
                  component={
                    AsyncLoader (() => import('$view/rn/home'),"rn" )
                  }
                />
                {/* 简单了解 */}
                <Route
                  exact
                  path="/rn/know"
                  component={
                    AsyncLoader (() => import('$view/rn/know'),"know" )
                  }
                />
                {/* state */}
                <Route
                  exact
                  path="/rn/state"
                  component={
                    AsyncLoader (() => import('$view/rn/state'),"state" )
                  }
                />
                {/* 错误路由 404  */}
                
                <Redirect  to={{pathname: '/404'}} />
              </Switch>
            </Content>
          </Layout>
      </Layout>
      </div>
    );
  }
}

export default withRouter(ReactBox);
